<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>依之猫首页 </title>
    <link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/home.css">
    <!--[if it IE 9]>
    <script src="/assets/html5shiv/html5shiv.js"></script>
    <script src="/assets/respond/respond.js"></script>
    <![end if]-->
    <!--<script src="jq/jquery.min.1.11.js"></script>-->
    <script src="/assets/js/jquery-3.1.1.min.js"></script>
    <script src="/assets/js/jquery.flexslider-min.js"></script>
    <script src="/assets/js/bootstrap.min.js"></script>
</head>
<script>
    <!-- js调用部分begin -->
    $(function() {
        $('.flexslider').flexslider({
            directionNav: true,
            pauseOnAction: false
        });


        //产品列表侧出

        var $mLi = $("#wordBox").children();
        $mLi.mouseover(function() {
            mouse_L(this)
        });
        $mLi.mouseout(function() {
            mouse_m(this)
        });

        function mouse_L(thisLi) {
            $(".set").hide();
            $(thisLi).children(".set").show();
            $mLi.css("background-color", "RGBA(0,0,0,0.8)");
            $(thisLi).css("background-color", "RGBA(0,0,0,0.9)");

        }

        function mouse_m(thisLi) {
            $(thisLi).children(".set").hide();
            $mLi.css("background-color", "RGBA(0,0,0,0.8)");
        }
        //直接显示遮罩效果开始
        $(".con-one").hover(function() {
            $(this).find(".txt-one").show();
        }, function() {
            $(this).find(".txt-one").hide();
        })
        $(".con-two").hover(function() {
            $(this).find(".txt-two").show();
        }, function() {
            $(this).find(".txt-two").hide();
        })
        $(".con-three").hover(function() {
            $(this).find(".txt-three").show();
        }, function() {
            $(this).find(".txt-three").hide();
        })

        //直接显示遮罩效果结束
        //图片放大效果 开始
        $(".imgsContent01").hover(function() {
            $(this).find("#imgCon01").stop().animate({
                "width": 480,
                "height": 670
            });
        }, function() {
            $(this).find("#imgCon01").stop().animate({
                "width": 468,
                "height": 660
            });
        })
        $(".imgsContent02").hover(function() {
            $(this).find("#imgCon03").stop().animate({
                "width": 530,
                "height": 610
            });
        }, function() {
            $(this).find("#imgCon03").stop().animate({
                "width": 520,
                "height": 600
            });
        })
        $(".imgContent02").hover(function() {
            $(this).find("#imgCon02").stop().animate({
                "width": 530,
                "height": 610
            });
        }, function() {
            $(this).find("#imgCon02").stop().animate({
                "width": 520,
                "height": 600
            });
        })

        //图片放大效果 结束
        //图片放大效果伴随蒙版出现 开始
        $(".picsCon01").hover(function() {
            $(this).find(".img01").stop().animate({
                "width": 446,
                "height": 406
            });
            $(this).find(".txt-seven").show();
        }, function() {
            $(this).find(".img01").stop().animate({
                "width": 440,
                "height": 400
            });
            $(this).find(".txt-seven").hide();
        })
        $(".picsCon02").hover(function() {
            $(this).find(".img02").stop().animate({
                "width": 766,
                "height": 406
            });
            $(this).find(".txt-five").show();
        }, function() {
            $(this).find(".img02").stop().animate({
                "width": 760,
                "height": 400
            });
            $(this).find(".txt-five").hide();
        })
        $(".picsCon03").hover(function() {
            $(this).find(".img03").stop().animate({
                "width": 406,
                "height": 506
            });
            $(this).find(".txt-six").show();
        }, function() {
            $(this).find(".img03").stop().animate({
                "width": 400,
                "height": 500
            });
            $(this).find(".txt-six").hide();
        })
        $(".picsCon04").hover(function() {
            $(this).find(".img04").stop().animate({
                "width": 606,
                "height": 406
            });
            $(this).find(".txt-four").show();
        }, function() {
            $(this).find(".img04").stop().animate({
                "width": 600,
                "height": 400
            });
            $(this).find(".txt-four").hide();
        })
    })
</script>

<body>
<!---head--------->
<div class="header">
    <div class="box">
        <div class="title">
            <img class="images01" src="/assets/images/logo01.jpg" alt="这是一张图片">
            <a href="index.html">
                <div>依之猫首页</div>
            </a>
            <a href="zhuCe.html">
                <p><span>注册</span></p>
            </a>
            <a href="login.html">
                <p>登录</p>
            </a>
            <a href="#">
                <p>我的收藏</p>
            </a>
            <a href="orders.html">
                <p><img src="/assets/images/logo02.jpg">我的订单</p>
            </a>
            <a href="shopping.html">
                <p><img src="/assets/images/logo03.jpg">购物篮</p>
            </a>
        </div>
    </div>
    <div class="logoCon">
        <img src="/assets/images/logo04.jpg" alt="这是一张图片">
        <form><input id="search" type="text" value="" placeholder="搜商品"><input id="souSuo" type="submit" value="搜索"></form>
        <ul class="nav">
            <a href="#">毛呢外套</a>
            <a href="#">短靴</a>
            <a href="#">毛衣</a>
            <a href="#">男士外套</a>
            <a href="#">卫衣</a>
            <a href="#">睡衣</a>
            <a href="#">秋冬套装</a>
            <a href="#">打底裤</a>
            <a href="#">连衣裙</a>
        </ul>
    </div>
</div>
<!---content------>
<!--banner---->
<div class="flexslider">
    <!---盒子---------->
    <ul id="wordBox">
        <li><a href="#"><span>上衣</span></a><a href="#">秋季新品</a><a href="#">时尚套装</a><a href="#">卫衣</a>
            <!---->
            <div class="set">
                <h4><a href="#">秋冬新品</a></h4>
                <div><a href="#">针织开衫</a><a href="#">运动衫</a><a href="#">V领上衣</a><a href="#">风衣</a></div>
                <div><a href="#">牛仔外套</a><a href="#">衬衫</a><a href="#">毛衣</a><a href="#">长款T恤</a></div>
                <div><a href="#">长款外套</a><a href="#">蕾丝衫</a><a href="#">打底衫</a></div>
                <h4><a href="#">潮流时尚</a></h4>
                <div><a href="#">针织背心</a><a href="#">荷叶边</a><a href="#">情侣装</a></div>
            </div>
        </li>
        <li><a href="#"><span>裙子</span></a><a href="#">秋上新</a><a href="#">针织裙</a><a href="#">连衣裙</a>
            <!---->
            <div class="set">
                <h4><a href="#">经典必备</a></h4>
                <div><a href="#">美裙套装</a><a href="#">半身裙</a><a href="#">长袖连衣裙</a><a href="#">针织裙</a></div>
                <div><a href="#">雪纺裙</a><a href="#">连衣裙</a><a href="#">卫衣裙</a><a href="#">小黑裙</a></div>
                <div><a href="#">皮裙</a><a href="#">收腰裙</a><a href="#">包臀裙</a></div>
                <h4><a href="#">流行精选</a></h4>
                <div><a href="#">蕾丝裙</a><a href="#">背带裙</a><a href="#">百褶裙</a></div>
            </div>
        </li>
        <li><a href="#"><span>裤子</span></a><a href="#">打底裤</a><a href="#">小腿裤</a><a href="#">牛仔裤</a>
            <!---->
            <div class="set">
                <h4><a href="#">流行精选</a></h4>
                <div><a href="#">打底裤</a><a href="#">牛仔裤</a><a href="#">阔腿裤</a><a href="#">小脚裤</a></div>
                <div><a href="#">背带裤</a><a href="#">休闲裤</a><a href="#">九分裤</a><a href="#">七分裤</a></div>
                <div><a href="#">破洞牛仔裤</a><a href="#">哈伦裤</a><a href="#">连体裤</a></div>
                <h4><a href="#">热门推荐</a></h4>
                <div><a href="#">铅笔裤</a><a href="#">裙裤</a><a href="#">皮裤</a></div>
            </div>
        </li>
        <li><a href="#"><span>内衣</span></a><a href="#">热销榜</a><a href="#">睡衣套装</a><a href="#">内裤</a>
            <!---->
            <div class="set">
                <h4><a href="#">内衣套装</a></h4>
                <div><a href="#">调整型内衣</a><a href="#">文胸</a><a href="#">内裤</a><a href="#">无痕内衣</a></div>
                <div><a href="#">运动内衣</a><a href="#">卡通内裤</a><a href="#">保暖内衣</a></div>
                <div><a href="#">堆堆袜</a><a href="#">瘦腿袜</a><a href="#">打底袜</a></div>
                <h4><a href="#">家居睡衣</a></h4>
                <div><a href="#">睡衣套装</a><a href="#">家居服</a><a href="#">睡裙</a></div>
            </div>
        </li>
        <li><a href="#"><span>鞋子</span></a><a href="#">靴子</a><a href="#">单鞋</a><a href="#">运动鞋</a>
            <!---->
            <div class="set">
                <h4><a href="#">热门推荐</a></h4>
                <div><a href="#">单鞋</a><a href="#">运动鞋</a><a href="#">靴子</a><a href="#">小白鞋</a></div>
                <div><a href="#">帆布鞋</a><a href="#">厚底鞋</a><a href="#">高跟鞋</a><a href="#">休闲鞋</a></div>
                <div><a href="#">一脚蹬</a><a href="#">马丁靴</a><a href="#">牛津鞋</a></div>
                <h4><a href="#">人气推荐</a></h4>
                <div><a href="#">短靴</a><a href="#">粗跟鞋</a></div>
            </div>
        </li>
        <li><a href="#"><span>男士</span></a><a href="#">夹克</a><a href="#">加厚裤装</a><a href="#">卫衣</a>
            <!---->
            <div class="set">
                <h4><a href="#">当季热卖</a></h4>
                <div><a href="#">棉衣棉服</a><a href="#">牛仔裤</a><a href="#">卫衣</a><a href="#">夹克</a></div>
                <div><a href="#">休闲鞋</a><a href="#">休闲裤</a><a href="#">毛衣针织</a><a href="#">绅士皮鞋</a></div>
                <div><a href="#">时尚套装</a><a href="#">男袜</a><a href="#">贴身内裤</a></div>
                <h4><a href="#">人气单品</a></h4>
                <div><a href="#">牛仔外套</a><a href="#">棒球夹克</a></div>
            </div>
        </li>
        <li><a href="#"><span>包包</span></a><a href="#">秋上新</a><a href="#">女包</a><a href="#">男包</a>
            <!---->
            <div class="set">
                <h4><a href="#">热门款式</a></h4>
                <div><a href="#">新品</a><a href="#">双肩包</a><a href="#">斜挎包</a><a href="#">手提包</a></div>
                <div><a href="#">单肩包</a><a href="#">百搭大包</a><a href="#">迷你小包</a><a href="#">旅行箱包</a></div>
                <div><a href="#">女士钱包</a><a href="#">男士钱包</a><a href="#">手拿包</a></div>
                <h4><a href="#">热门流行</a></h4>
                <div><a href="#">链条包</a><a href="#">贝壳包</a></div>
            </div>
        </li>
        <li><a href="#"><span>运动</span></a><a href="#">运动套装</a><a href="#">运动鞋</a><a href="#">卫衣</a>
            <!---->
            <div class="set">
                <h4><a href="#">火爆热卖</a></h4>
                <div><a href="#">运动套装</a><a href="#">运动鞋</a><a href="#">元气棉服</a><a href="#">跑鞋</a></div>
                <div><a href="#">棒球衫</a><a href="#">帆布鞋</a><a href="#">情侣款</a><a href="#">双肩包</a></div>
                <div><a href="#">运动内衣</a><a href="#">明星同款</a><a href="#">休闲板鞋</a></div>
                <h4><a href="#">品牌专柜</a></h4>
                <div><a href="#">耐克</a><a href="#">阿迪达斯</a><a href="#">New Balance</a></div>
            </div>
        </li>
        <li><a href="#"><span>美妆</span></a><a href="#">补水保湿</a><a href="#">面膜</a><a href="#">BB霜</a>
            <!---->
            <div class="set">
                <h4><a href="#">必备护肤</a></h4>
                <div><a href="#">保湿补水</a><a href="#">美白淡斑</a><a href="#">洁面</a><a href="#">人气面膜</a></div>
                <div><a href="#">水乳</a><a href="#">眼唇护理</a><a href="#">T区护理</a><a href="#">护唇膏</a></div>
                <div><a href="#">精华</a><a href="#">护肤套装</a><a href="#">防晒</a></div>
                <h4><a href="#">潮流彩妆</a></h4>
                <div><a href="#">妆前隔离</a><a href="#">美妆工具</a><a href="#">彩妆套装</a></div>
            </div>
        </li>
        <li><a href="#"><span>配饰</span></a><a href="#">早秋围巾</a><a href="#">项链</a><a href="#">男士配饰</a>
            <!---->
            <div class="set">
                <h4><a href="#">潮流速递</a></h4>
                <div><a href="#">手表</a><a href="#">锁骨链</a><a href="#">帽子</a><a href="#">发饰</a></div>
                <div><a href="#">吊坠</a><a href="#">组合戒指</a><a href="#">手镯</a><a href="#">项链</a></div>
                <div><a href="#">渔夫帽</a><a href="#">脚链</a><a href="#">男士墨镜</a></div>
                <h4><a href="#">特色饰品</a></h4>
                <div><a href="#">奢侈珠宝</a><a href="#">腰带</a><a href="#">胸针</a></div>
            </div>
        </li>
    </ul>
    <ul class="slides">
        <li style="background:url(/assets/images/banner01.jpg) 50% 0 no-repeat; background-size:cover"></li>
        <li style="background:url(/assets/images/banner02.jpg) 50% 0 no-repeat;"></li>
        <li style="background:url(/assets/images/banner03.jpg) 50% 0 no-repeat;"></li>

    </ul>
</div>
<!--分类------->
<div class="content">
    <ul class="contentbox01">
        <li class="con-one">
            <a href="#"><img src="/assets/images/images01.jpg"></a>
            <div class="txt-one">
                <div class="txtCon">
                    <div class="txtCon01">外套</div>
                    <div class="txtCon02">More</div>
                </div>
            </div>
        </li>
        <li class="con-one">
            <a href="#"><img src="/assets/images/images02.jpg"></a>
            <div class="txt-one">
                <div class="txtCon">
                    <div class="txtCon01">外套</div>
                    <div class="txtCon02">More</div>
                </div>
            </div>
        </li>
        <li class="con-one">
            <a href="#"><img src="/assets/images/images03.jpg"></a>
            <div class="txt-one">
                <div class="txtCon">
                    <div class="txtCon01">外套</div>
                    <div class="txtCon02">More</div>
                </div>
            </div>
        </li>
    </ul>
    <ul class="contentbox02">
        <li class="con-two">
            <a href="#"><img src="/assets/images/images04.jpg"></a>
            <div class="txt-two">
                <div class="txtCon">
                    <div class="txtCon03">外套</div>
                    <div class="txtCon04">More</div>
                </div>
            </div>
        </li>
        <li class="con-three">
            <a href="#"><img src="/assets/images/images05.jpg"></a>
            <div class="txt-three">
                <div class="txtCon">
                    <div class="txtCon05">外套</div>
                    <div class="txtCon06">More</div>
                </div>
            </div>
        </li>
        <li class="con-two">
            <a href="#"><img src="/assets/images/images06.jpg"></a>
            <div class="txt-two">
                <div class="txtCon">
                    <div class="txtCon03">外套</div>
                    <div class="txtCon04">More</div>
                </div>
            </div>
        </li>
    </ul>
</div>
<!--新品------->
<a href="#">
    <div class="titleCon">
        <div>秋季新品</div>
        <p>More</p>
    </div>
</a>
<div class="xinPin">
    <a href="#"><img id="imgs" src="/assets/images/images07.jpg"></a>
    <ul class="imgCon">
        <li class="imgContent01">
            <div class="imgsContent01">
                <a href="#"><img id="imgCon01" src="/assets/images/images08.jpg"></a>
            </div>
            <div class="imgsContent02">
                <a href="#"><img id="imgCon03" src="/assets/images/images10.jpg"></a>
            </div>
        </li>
        <li class="imgContent02">
            <a href="#"><img id="imgCon02" src="/assets/images/images09.jpg"></a>
        </li>
    </ul>
</div>
<!---分类1---------->
<div class="content02">
    <div class="picCon01">
        <div class="picsCon01">
            <a href="#"><img class="img01" src="/assets/images/images11.jpg"></a>
            <div class="txt-seven"></div>
        </div>
        <div class="picsCon02">
            <a href="#"><img class="img02" src="/assets/images/images12.jpg"></a>
            <div class="txt-five"></div>
        </div>
    </div>
    <div class="picCon02">
        <div class="picsCon03">
            <a href="#"><img class="img03" src="/assets/images/images13.jpg"></a>
            <div class="txt-six"></div>
        </div>
        <div class="picsCon03">
            <a href="#"><img class="img03" src="/assets/images/images14.jpg"></a>
            <div class="txt-six"></div>
        </div>
        <div class="picsCon03">
            <a href="#"><img class="img03" src="/assets/images/images15.jpg"></a>
            <div class="txt-six"></div>
        </div>
    </div>
    <div class="picCon03">
        <div class="picsCon04">
            <a href="#"><img class="img04" src="/assets/images/images16.jpg"></a>
            <div class="txt-four"></div>
        </div>
        <div class="picsCon04">
            <a href="#"><img class="img04" src="/assets/images/images17.jpg"></a>
            <div class="txt-four"></div>
        </div>
    </div>
</div>
<!---分类2---------->
<div class="content03">
    <div class="picCon04">
        <div class="picsCon01">
            <a href="#"><img class="img01" src="/assets/images/images18.jpg"></a>
            <div class="txt-seven"></div>
        </div>
        <div class="picsCon02">
            <a href="#"><img class="img02" src="/assets/images/images19.jpg"></a>
            <div class="txt-five"></div>
        </div>
    </div>
    <div class="picCon05">
        <div class="picsCon03">
            <a href="#"><img class="img03" src="/assets/images/images20.jpg"></a>
            <div class="txt-six"></div>
        </div>
        <div class="picsCon03">
            <a href="#"><img class="img03" src="/assets/images/images21.jpg"></a>
            <div class="txt-six"></div>
        </div>
        <div class="picsCon03">
            <a href="#"><img class="img03" src="/assets/images/images22.jpg"></a>
            <div class="txt-six"></div>
        </div>
    </div>
    <div class="picCon06">
        <div class="picsCon02">
            <a href="#"><img class="img02" src="/assets/images/images23.jpg"></a>
            <div class="txt-five"></div>
        </div>
        <div class="picsCon01">
            <a href="#"><img class="img01" src="/assets/images/images24.jpg"></a>
            <div class="txt-seven"></div>
        </div>
    </div>
</div>
<!---分类3---------->
<div class="content04">
    <div class="picCon07">
        <div class="picsCon04">
            <a href="#"><img class="img04" src="/assets/images/images25.jpg"></a>
            <div class="txt-four"></div>
        </div>
        <div class="picsCon04">
            <a href="#"><img class="img04" src="/assets/images/images26.jpg"></a>
            <div class="txt-four"></div>
        </div>
    </div>
    <div class="picCon08">
        <div class="picsCon02">
            <a href="#"><img class="img02" src="/assets/images/images27.jpg"></a>
            <div class="txt-five"></div>
        </div>
        <div class="picsCon01">
            <a href="#"><img class="img01" src="/assets/images/images28.jpg"></a>
            <div class="txt-seven"></div>
        </div>
    </div>
    <div class="picCon09">
        <div class="picsCon03">
            <a href="#"><img class="img03" src="/assets/images/images29.jpg"></a>
            <div class="txt-six"></div>
        </div>
        <div class="picsCon03">
            <a href="#"><img class="img03" src="/assets/images/images30.jpg"></a>
            <div class="txt-six"></div>
        </div>
        <div class="picsCon03">
            <a href="#"><img class="img03" src="/assets/images/images31.jpg"></a>
            <div class="txt-six"></div>
        </div>
    </div>
</div>
<!---分类4---------->
<div class="content05">
    <div class="picCon10">
        <div class="picsCon01">
            <a href="#"><img class="img01" src="/assets/images/images32.jpg"></a>
            <div class="txt-seven"></div>
        </div>
        <div class="picsCon02">
            <a href="#"><img class="img02" src="/assets/images/images33.jpg"></a>
            <div class="txt-five"></div>
        </div>
    </div>
    <div class="picCon11">
        <div class="picsCon04">
            <a href="#"><img class="img04" src="/assets/images/images34.jpg"></a>
            <div class="txt-four"></div>
        </div>
        <div class="picsCon04">
            <a href="#"><img class="img04" src="/assets/images/images35.jpg"></a>
            <div class="txt-four"></div>
        </div>
    </div>
</div>

<!---foot--------->
<div class="footer01">
    <div class="footerBox">
        <img src="/assets/images/logo05.jpg" alt="这是一张图片">
        <div class="footerCon01">
            <ul class="foot01">
                <li><a href="#"><span>公司</span></a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">招聘信息</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
        <div class="footerCon02">
            <ul class="foot02">
                <li><a href="#"><span>消费者</span></a></li>
                <li><a href="#">消费者服务</a></li>
                <li><a href="#">意见反馈</a></li>
                <li><a href="#">手机版下载</a></li>
            </ul>
        </div>
        <div class="footerCon03">
            <ul class="foot03">
                <li><a href="#"><span>支付方式</span></a></li>
                <li><a href="#">快捷支付</a></li>
                <li><a href="#">银联支付</a></li>
                <li><a href="#">微信支付</a></li>
            </ul>
        </div>
        <div class="footerCon04">
            <ul class="foot04">
                <li><a href="#"><span>商家服务</span></a></li>
                <li><a href="#">商家入驻</a></li>
                <li><a href="#">商家中心</a></li>
                <li><a href="#">运营服务</a></li>
            </ul>
        </div>
        <div class="footerCon05">
            <ul class="foot05">
                <li><a href="#"><span>手机商城</span></a></li>
            </ul>
            <div class="erWeiMa"></div>
        </div>
    </div>
</div>
<div class="footer02">
    <p>依之猫</p>
</div>







</body>

</html>